<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>action的使用</title>
<script src="./../../node_modules/vue/dist/vue.js"></script>
<script src="./../../node_modules/vuex/dist/vuex.min.js"></script>
</head>
<body>
<div id="app">
	<h2>{{msg}}</h2>
	<a href="javascript:;" @click="add">点击</a>
	<counter></counter>
</div>
<script>
	const counter = {
		template:`
		   <div>
           <div>点击数量:{{ count }}</div>
           <div>用户名：{{ userName }}</div>
           </div>
		`,
		computed:{
			count(){
				return this.$store.state.count;
			},
			name(){
				return this.$store.state.name;
			},
			userName(){
				return this.$store.getters.userName;
			}
		}
	}
	const store = new Vuex.Store({
        state:{
        	count:10,
        	name:'jack'
        },
        // 在某些地方使用不需要再mutations里定义
        getters:{
          userName(state){
           return state.name + ',HELLO';
          }
        },
        mutations:{
        	increment(state,num){
        		state.count= num;
        	},
        	updateName(state,userName){
                 state.name = userName;
        	}
        },
        actions:{
        	incrementAction(context,num){
        		context.commit("increment",num);
        	}
        }
	});
	new Vue({
		el:"#app",
		store,
		data:{
			msg:"Vuex的使用"
		},

		components:{
			counter
		},
		methods:{
		add(){
			this.$store.dispatch("incrementAction",5);
		}	
		}
	})
</script>
</body>
</html>